
// 开始&暂停录制按钮
const startBut = document.querySelector('.box-start')
// 结束录制按钮
const stopBut = document.querySelector('.box-stop')
// 录制状态
const showStatus = document.querySelector('.box-show')


const toolStatus = {
    UNRECORDED: 'unrecorded', // 未录制
    INPROGRESS: 'inprogress', // 录制中
    PAUSED: 'paused', // 暂停中
}
//录制的状态
let nowStatus = toolStatus['UNRECORDED']
// 混合后的流
let mixedStream = null

// 监视时间变化
const time = document.querySelector('.time')
let timer = timeChange(time)


const toolMethods = {
    unrecorded: ()=> {
        // 改变showStatus的字体颜色
        showStatus.style.color = '#e63f32'
        //开始录制
        recorderManager.start()
        timer.start()
        // 改变状态
        nowStatus = toolStatus['INPROGRESS']
    },
    inprogress: ()=> {
        showStatus.style.color = '#269745'
        // 暂停录制
        recorderManager.pause()
        timer.pause()
        // 改变状态
        nowStatus = toolStatus['PAUSED']
    },
    paused: ()=> {
        // 改变showStatus的字体颜色
        showStatus.style.color = '#e63f32'
        // 恢复录制
        recorderManager.resume()
        timer.resume()
        // 改变状态
        nowStatus = toolStatus['INPROGRESS']
    }
}


//开始录制
startBut.addEventListener('click', (event)=> {
    // 如果没有录制器
    if(!recorderManager.isRecorder()) return
    // 控制图标的显示
    // 移除所有class属性
    startBut.querySelector('.start-ishow').classList.remove('start-ishow')
    event.target.classList.add('start-ishow')
    toolMethods[nowStatus]()
})

//结束录制
stopBut.addEventListener('click', ()=> {
            // 未录制直接返回
        if(nowStatus === toolStatus['UNRECORDED']) return
        // 改变录制状态为未录制
        nowStatus = toolStatus['UNRECORDED']
        // 改变showStatus的字体颜色
        showStatus.style.color = ''
        //结束录制
        timer.stop()
        recorderManager.stop()
        // 打开加载页面
        openLoad()
        setTimeout(()=> {
            window.ffmpegAPI.saveFile(closeLoad)
        },100)
})

//获取load
const loadEle = document.querySelector('.load')
// 打开加载页面
function openLoad() {
    loadEle.style.display = 'flex'
}
function closeLoad() {
    loadEle.style.display = 'none'
}

// 获取有值的流的轨道
function getTrueStreams() {
    // 有值的流
    const trueStreams = []
    // 遍历streams
    for(let key in streams) {
        if(streams[key]) {
            // 添加到trueStreams
            trueStreams.push(streams[key])
        }
    }
    if(trueStreams.length === 0) return null
    return trueStreams
}

// 时间变化
function timeChange(Ele) {
    let time = 0
    let timer
    let oldVal = Ele.innerHTML
    function start() {
        timer = setInterval(()=> {
            time++
            Ele.innerHTML = timeConvert(time)
        }, 1000)
    }
    function stop() {
        clearInterval(timer)
        Ele.innerHTML = oldVal
        time = 0
    }
    function pause() {
        clearInterval(timer)  
    }
    function resume() {
        start()
    }
    
    return {
        start,
        stop,
        pause,
        resume
    }
}

function twoStrTime(num) {
    return num < 10 ? '0' + num : num + ''
}

// 时间转换
function timeConvert(totalTime) {
    // 秒
    let s = totalTime % 60
    // 分
    let m = Math.floor(totalTime / 60) % 60
    // 时 向下取整
    let h = Math.floor(totalTime / 3600)
    return `${twoStrTime(h)}:${twoStrTime(m)}:${twoStrTime(s)}`
}